<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>瀑布式布局</title>
	</head>
	<style>
		.flex_box {
			display: flex;
			flex-direction: row;
		}

		.waterfall {
			display: flex;
			flex-direction: column;
		}

		.item {
			box-sizing: border-box;
			break-inside: avoid;
			padding: 10px;
		}

		.item-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 10px;
			height: auto;
			font-size: 20px;
			color: #686868;
			box-sizing: border-box;
			border: 1px solid #ccc;
		}
	</style>
	<body>
		<div class="flex_box">
			<div class="waterfall">
				<div class="item">
					<div class="item-content">
						1.三月到大理赏樱花不远不近
					</div>
				</div>
				<div class="item">
					<div class="item-content">
						4.三月到大理赏樱花不远不近,三月到大理赏樱花不远不近
					</div>
				</div>
				<div class="item">
					<div class="item-content">
						7.三月到大理赏樱花不远不近,又近又远,月到大理赏樱花不远不近,又近又远
					</div>
				</div>
			</div>
			<div class="waterfall">
				<div class="item">
					<div class="item-content">
						2.三月到大理赏樱花不远不近
					</div>
				</div>
				<div class="item">
					<div class="item-content">
						5.三月到大理赏樱花不远不近,三月到大理赏樱花不远不近
					</div>
				</div>
				<div class="item">
					<div class="item-content">
						8.三月到大理赏樱花不远不近,又近又远
					</div>
				</div>
			</div>
			<div class="waterfall">
				<div class="item">
					<div class="item-content">
						3.三月到大理赏樱花不远不近,月到大理赏樱花不远不近,又近又远
					</div>
				</div>
				<div class="item">
					<div class="item-content">
						6.三月到大理赏樱花不远不近
					</div>
				</div>
				<div class="item">
					<div class="item-content">
						9.三月到大理赏樱花不远不近,又近又远
					</div>
				</div>
			</div>
		</div>

	</body>
</html>
